<template>
  <div class="app-container">
    <div class="app-header">
      <h1>🚀 Vue3 PDF.js Viewer NPM包测试</h1>
      <p>作者：李宁</p>

      <!-- NPM包链接 -->
      <!-- <div class="npm-link-section">
        <a 
          href="https://www.npmjs.com/package/vue3-pdfjs-viewer" 
          target="_blank" 
          rel="noopener noreferrer"
          class="npm-link"
        >
          📦 查看NPM包详情
         
        </a>
      
      </div> -->

      <div class="mode-selector">
        <button :class="{ active: mode === 'demo' }" @click="mode = 'demo'">
          📋 功能演示
        </button>
        <button :class="{ active: mode === 'simple' }" @click="mode = 'simple'">
          🎯 简单使用
        </button>
        <button :class="{ active: mode === 'test' }" @click="mode = 'test'">
          🧪 测试模式
        </button>
        <div style="display: flex; justify-content: center; align-items: center; " >
          <a
            href="https://www.npmjs.com/package/vue3-pdfjs-viewer"
            target="_blank"
            rel="noopener noreferrer"
            style="color: white;"
          >
            📦 查看NPM包详情
          </a>
        </div>
      </div>
    </div>

    <div class="app-content">
      <!-- 功能演示模式 -->
      <PdfViewerExample v-if="mode === 'demo'" />

      <!-- 简单使用模式 -->
      <div v-else-if="mode === 'simple'" class="simple-mode">
        <div class="pdf-selector">
          <h3>选择PDF文件:</h3>
          <div class="pdf-buttons">
            <button
              v-for="file in pdfFiles"
              :key="file.path"
              :class="{ active: currentPdf === file.path }"
              @click="currentPdf = file.path"
            >
              {{ file.name }}
            </button>
          </div>
        </div>
        <div class="simple-viewer">
          <PdfWithThumbnails
            :src="currentPdf"
            @pdf-loaded="onSimplePdfLoaded"
            @pdf-error="onSimplePdfError"
          />
        </div>
      </div>

      <!-- 测试模式 -->
      <div v-else class="test-mode">
        <div class="test-status-panel">
          <div class="status-card">
            <h3>📊 测试状态</h3>
            <div class="status-grid">
              <div class="status-item">
                <span class="status-badge success">✅ NPM包加载</span>
                <small>包已成功导入</small>
              </div>
              <div class="status-item">
                <span class="status-badge" :class="componentStatus">
                  {{ componentStatusIcon }} 组件渲染
                </span>
                <small>{{ componentStatusText }}</small>
              </div>
              <div class="status-item">
                <span class="status-badge" :class="pdfStatus">
                  {{ pdfStatusIcon }} PDF加载
                </span>
                <small>{{ pdfStatusText }}</small>
              </div>
            </div>
          </div>

          <div class="test-controls">
            <h4>🎮 测试控制</h4>
            <select
              v-model="selectedPdf"
              @change="loadTestPdf"
              class="test-select"
            >
              <option value="">请选择PDF文件</option>
              <option value="/test1.pdf">本地测试文档1</option>
              <option value="/test2.pdf">本地测试文档2</option>
              <option value="invalid-url">无效URL测试</option>
              <option value="">空路径测试</option>
            </select>

            <div class="theme-test">
              <label>快速主题测试:</label>
              <div class="theme-buttons">
                <button @click="applyTestTheme('default')" class="theme-btn">
                  默认
                </button>
                <button @click="applyTestTheme('dark')" class="theme-btn">
                  深色
                </button>
                <button @click="applyTestTheme('light')" class="theme-btn">
                  浅色
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="test-viewer">
          <PdfWithThumbnails
            :src="testPdfSrc"
            v-bind="testThemeConfig"
            style="height: 500px"
            @pdf-loaded="onTestPdfLoaded"
            @pdf-error="onTestPdfError"
          />
        </div>
      </div>
    </div>

    
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import {
  PdfWithThumbnails,
  themes,
  configurePdfWorker,
} from "vue3-pdfjs-viewer";
import PdfViewerExample from "./components/PdfViewerExample.vue";

/**
 * 主应用组件
 * @author Ning,Li
 */

// 确保PDF.js Worker正确配置
configurePdfWorker();

// 模式选择：demo（功能演示）、simple（简单使用）、test（测试模式）
const mode = ref("demo");

// 模式选择状态

// 简单模式的PDF文件列表
const pdfFiles = [
  { name: "📄 测试文档2", path: "/test1.pdf" },
  { name: "📄 测试文档3", path: "/test2.pdf" },
];

// 简单模式当前选中的PDF
const currentPdf = ref("/test1.pdf");

// 测试模式数据
const selectedPdf = ref("");
const testPdfSrc = ref("");
const testCurrentTheme = ref("default");
const testPdfLoaded = ref(false);
const testPdfError = ref(false);
const testComponentLoaded = ref(true);

// 测试模式状态计算
const pdfStatus = computed(() => {
  if (!testPdfSrc.value) return "info";
  if (testPdfError.value) return "error";
  if (testPdfLoaded.value) return "success";
  return "loading";
});

const pdfStatusIcon = computed(() => {
  if (!testPdfSrc.value) return "📄";
  if (testPdfError.value) return "❌";
  if (testPdfLoaded.value) return "✅";
  return "⏳";
});

const pdfStatusText = computed(() => {
  if (!testPdfSrc.value) return "等待选择PDF";
  if (testPdfError.value) return "PDF加载失败";
  if (testPdfLoaded.value) return "PDF加载成功";
  return "PDF加载中...";
});

const componentStatus = computed(() => {
  return testComponentLoaded.value ? "success" : "error";
});

const componentStatusIcon = computed(() => {
  return testComponentLoaded.value ? "✅" : "❌";
});

const componentStatusText = computed(() => {
  return testComponentLoaded.value ? "组件正常渲染" : "组件渲染失败";
});

// 测试模式主题配置
const testThemeConfig = computed(() => {
  return themes[testCurrentTheme.value] || themes.default;
});



// 加载测试PDF
const loadTestPdf = () => {
  testPdfSrc.value = selectedPdf.value;
  testPdfLoaded.value = false;
  testPdfError.value = false;
};

// 应用测试主题
const applyTestTheme = (themeName) => {
  testCurrentTheme.value = themeName;
};

// 简单模式PDF事件处理
const onSimplePdfLoaded = () => {
  console.log("简单模式 - PDF加载成功");
};

const onSimplePdfError = () => {
  console.error("简单模式 - PDF加载失败");
};

// 测试模式PDF事件处理
const onTestPdfLoaded = () => {
  testPdfLoaded.value = true;
  testPdfError.value = false;
  console.log("测试模式 - PDF加载成功");
};

const onTestPdfError = () => {
  testPdfLoaded.value = false;
  testPdfError.value = true;
  console.error("测试模式 - PDF加载失败");
};



// 组件挂载时初始化
onMounted(() => {
  // 确保PDF.js Worker正确配置已在组件顶部执行
  console.log('Vue3 PDF.js Viewer Demo 已启动');
});
</script>

<style>
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* 去掉页面级滚动 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}



#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  height: 180px; /* 固定header高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app-header h1 {
  margin: 0 0 8px 0;
  color: white;
  font-size: 2.2em;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.app-header p {
  margin: 0 0 8px 0;
  font-size: 1.1em;
  opacity: 0.9;
}

.app-header code {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: bold;
}

/* NPM链接区域 */
.npm-link-section {
  margin: 15px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.npm-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.npm-link:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.external-link-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.npm-stats {
  font-size: 12px;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mode-selector {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mode-selector button {
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.mode-selector button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.mode-selector button.active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #667eea;
  border-color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 内容区域 - 固定高度无滚动 */
.app-content {
  flex: 1;
  height: calc(100vh - 180px); /* 固定高度：视口高度减去header高度 */
  overflow: hidden; /* 完全禁用内容区域滚动 */
}



/* 简单使用模式样式 */
.simple-mode {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.pdf-selector {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.pdf-selector h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-weight: 600;
}

.pdf-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pdf-buttons button {
  padding: 10px 18px;
  background-color: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  transition: all 0.3s ease;
}

.pdf-buttons button:hover {
  background-color: #e9ecef;
  border-color: #42b983;
  transform: translateY(-1px);
}

.pdf-buttons button.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
}

.simple-viewer {
  flex: 1;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  min-height: 60vh;
  max-height: calc(100vh - 200px);
}

/* 测试模式样式 */
.test-mode {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.test-status-panel {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.status-card h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-weight: 600;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-badge {
  padding: 6px 14px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  display: inline-block;
}

.status-badge.success {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.status-badge.loading {
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
  border: 1px solid rgba(0, 123, 255, 0.3);
}

.status-badge.info {
  background: rgba(108, 117, 125, 0.1);
  color: #6c757d;
  border: 1px solid rgba(108, 117, 125, 0.3);
}

.status-item small {
  color: #666;
  font-size: 11px;
}

.test-controls h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-weight: 600;
}

.test-select {
  width: 100%;
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.test-select:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 3px rgba(66, 185, 131, 0.1);
}

.theme-test label {
  display: block;
  font-weight: 500;
  color: #555;
  margin-bottom: 8px;
}

.theme-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-btn {
  padding: 6px 14px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.theme-btn:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

.test-viewer {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-height: 50vh;
  max-height: calc(100vh - 300px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .simple-mode,
  .test-mode {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 15px 10px;
    height: 140px; /* 移动端减小header高度 */
  }
  
  .app-header h1 {
    font-size: 1.8em;
  }
  
  .app-content {
    height: calc(100vh - 140px); /* 对应移动端header高度 */
  }
  
  .simple-mode,
  .test-mode {
    padding: 10px;
    gap: 15px;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .pdf-buttons {
    justify-content: center;
  }
  
  .mode-selector {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .mode-selector button {
    width: 180px;
    padding: 8px 16px;
  }
  
  .simple-viewer,
  .test-viewer {
    flex: 1;
    min-height: 350px;
  }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
  .app-header {
    padding: 12px 8px;
    height: 120px; /* 小屏幕进一步减小header高度 */
  }
  
  .app-header h1 {
    font-size: 1.6em;
    margin-bottom: 6px;
  }
  
  .app-header p {
    font-size: 1em;
    margin-bottom: 6px;
  }
  
  .app-content {
    height: calc(100vh - 120px); /* 对应小屏幕header高度 */
  }
  
  .simple-mode,
  .test-mode {
    padding: 8px;
    gap: 12px;
  }
  
  .pdf-selector,
  .test-status-panel {
    padding: 15px;
  }
  
  .simple-viewer,
  .test-viewer {
    flex: 1;
    min-height: 300px;
  }
}

/* 超小高度屏幕优化 */
@media (max-height: 600px) {
  .app-header {
    padding: 10px;
    height: 100px; /* 超小高度屏幕最小header */
  }
  
  .app-content {
    height: calc(100vh - 100px);
  }
  
  .simple-viewer,
  .test-viewer {
    flex: 1;
    min-height: 250px;
  }
}

/* 横屏小屏幕优化 */
@media (max-height: 480px) and (orientation: landscape) {
  .app-header {
    padding: 8px 10px;
    height: 80px; /* 横屏时使用最小header高度 */
  }
  
  .app-header h1 {
    font-size: 1.4em;
    margin-bottom: 4px;
  }
  
  .app-header p {
    font-size: 0.9em;
    margin-bottom: 4px;
  }
  
  .app-content {
    height: calc(100vh - 80px);
  }
  
  .mode-selector button {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .simple-viewer,
  .test-viewer {
    flex: 1;
    min-height: 200px;
  }
}

/* 确保内容不会超出视口 */
@media (max-width: 320px) {
  .simple-mode,
  .test-mode {
    padding: 5px;
  }

  .pdf-selector,
  .test-status-panel {
    padding: 10px;
  }

  .mode-selector button {
    width: 150px;
    font-size: 11px;
  }
}



/* 优化焦点状态 */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #42b983;
  outline-offset: 2px;
}

/* 改进高对比度模式支持 */
@media (prefers-contrast: high) {
  .app-header {
    background: #000;
    color: #fff;
  }

  .npm-link {
    border-color: #fff;
  }

  .show-header-btn {
    background: #000;
    border: 2px solid #fff;
  }
}

/* 减少动画以适应用户偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .app-header {
    transition: none;
  }

  .app-content {
    transition: none;
  }
}
</style>
